<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { listSku, changeSale, deleteSku, getSkuInfo } from "@/api/product/sku";
import type { SkuData } from "@/api/product/sku/type";
import type { BasePageReq, BasePageResp } from "@/api/baseType";
// 获取sku列表数据
const skuList = ref<SkuData[]>([]);
//分页参数
const pageReq = ref<BasePageReq>({ page: 1, limit: 5 });
//分页器参数
const paginationParam = ref<BasePageResp>({
  total: 0,
  size: 0,
  current: 0,
  searchCount: false,
  pages: 0,
});
//详情数据
const drawerData = ref<SkuData>({});
//控制抽屉展示
const drawerVisible = ref(false);
const reqSkuList = async () => {
  const res = await listSku(pageReq.value);
  if (res.code === 200) {
    skuList.value = res.data.records;
    //解构res.data
    const { total, size, current, searchCount, pages } = res.data;
    //将解构后的数据赋值给分页器
    paginationParam.value = { total, size, current, searchCount, pages };
  }
};

const showDrawer = async (row: SkuData) => {
  const res = await getSkuInfo(row.id);
  if (res.code === 200) {
    drawerData.value = res.data;
    drawerVisible.value = true;
  } else {
    ElMessage.error("获取详情失败");
  }
};
//页码变更时
const handleCurrentChange = (current: number) => {
  pageReq.value.page = current;
  reqSkuList();
};
//页数变更时
const handleSizeChange = (size: number) => {
  pageReq.value.limit = size;
  pageReq.value.page = 1;
  reqSkuList();
};
//商品上下架
const saleChange = async (row: SkuData, type: number) => {
  const res: any = await changeSale(row.id, type);
  if (res.code === 200) {
    ElMessage.success(type === 0 ? "下架成功" : "上架成功");
    reqSkuList();
  } else {
    ElMessage.error("操作失败");
  }
};
//商品删除
const reqDeleteSku = async (id: number) => {
  const res: any = await deleteSku(id);
  if (res.code === 200) {
    ElMessage.success("删除成功");
    if (skuList.value.length <= 1) {
      pageReq.value.page = pageReq.value.page - 1;
    }
    reqSkuList();
  } else {
    ElMessage.error("删除失败");
  }
};
//生命周期
onMounted(() => {
  reqSkuList();
});
</script>

<template>
  <el-card>
    <!-- 表格 -->
    <el-table :data="skuList" border style="margin-bottom: 10px">
      <el-table-column type="index" label="序号" width="80px" />
      <el-table-column
        prop="skuName"
        label="名称"
        show-overflow-tooltip
        width="200px"
      />
      <el-table-column
        prop="skuDesc"
        show-overflow-tooltip
        label="描述"
        width="350px"
      />
      <el-table-column prop="prop" label="图片" width="150px">
        <template #default="{ row }">
          <el-image
            style="width: 80px; height: 80px"
            :src="row.skuDefaultImg"
            :preview-src-list="[row.skuDefaultImg]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(g)" width="150px" />
      <el-table-column prop="price" label="价格(元)" width="150px" />
      <el-table-column prop="prop" label="操作" width="300px" fixed="right">
        <template #default="{ row }">
          <!-- 气泡框确认 -->
          <el-popconfirm
            v-if="row.isSale === 0"
            :title="`确定要上架${row.skuName}吗？`"
            @confirm="saleChange(row, 1)"
          >
            <template #reference>
              <el-button
                type="success"
                size="small"
                icon="Upload"
                title="上架"
              ></el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm
            v-else="row.isSale === 1"
            :title="`确定要上架${row.skuName}吗？`"
            @confirm="saleChange(row, 0)"
          >
            <template #reference>
              <el-button
                type="success"
                size="small"
                icon="Download"
                title="下架"
              ></el-button>
            </template>
          </el-popconfirm>
          <!-- <el-button
            type="warning"
            size="small"
            icon="Edit"
            title="编辑"
          ></el-button> -->
          <el-button
            type="primary"
            size="small"
            icon="View"
            @click="showDrawer(row)"
            title="查看"
          ></el-button>
          <el-popconfirm
            :title="`确定要删除${row.skuName}吗？`"
            @confirm="reqDeleteSku(row.id)"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                title="删除"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page="paginationParam?.current"
      :page-size="paginationParam?.size"
      :page-sizes="[10, 15, 20]"
      :background="true"
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="paginationParam?.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 商品详情查看，抽屉展示 -->
    <el-drawer v-model="drawerVisible" title="商品详情" size="30%">
      <el-descriptions title="商品信息" :column="1" border>
        <el-descriptions-item label="名称" min-width="80px">{{
          drawerData.skuName
        }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{
          drawerData.skuDesc
        }}</el-descriptions-item>
        <el-descriptions-item label="价格(元)">{{
          drawerData.price
        }}</el-descriptions-item>
        <el-descriptions-item label="重量(g)">{{
          drawerData.weight
        }}</el-descriptions-item>
        <el-descriptions-item label="平台属性">
          <el-tag
            v-for="(item, index) in drawerData.skuAttrValueList"
            :key="index"
            style="margin-right: 5px"
            >{{ item.valueName }}</el-tag
          ></el-descriptions-item
        >
        <el-descriptions-item label="销售属性">
          <el-tag
            v-for="(item, index) in drawerData.skuSaleAttrValueList"
            :key="index"
            type="warning"
            style="margin-right: 5px"
            >{{ item.saleAttrValueName }}</el-tag
          ></el-descriptions-item
        >
        <el-descriptions-item label="商品图片">
          <!-- 轮播展示图片 -->
          <el-carousel type="card">
            <el-carousel-item
              v-for="(item, index) in drawerData.skuImageList"
              :key="index"
            >
              <el-image style="width: 100%; height: 100%" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </el-card>
</template>

<style lang="scss" scoped></style>
